import Taro, { Component } from '@tarojs/taro'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { View, ScrollView } from '@tarojs/components'
import { DNavBar, DAdvance, DItemError, DModal, DCurtain } from '@/components'
import './advanceorder.scss'
import http from '@/api'
import sdk from '@/common/sdk'
export default class AdvanceorderBox extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      page: 1,
      limit: 10,
      isShow: false,
      footerStatus: false,
      totalPage: 1,
      isCurtain: '',
      status: 1, // 1:申请方 2:资金方
      scrollHeight: window.screen.availHeight,
      list: [],
      listStatus: false
    }
  }
  componentWillMount() {
    let { active = 0 } = this.$router.params
    this.handleClick(+active)
  }

  componentDidShow() {
    let { listStatus } = this.state
    if (listStatus) {
      return
    }
    this.setState({
      list: [],
      page: 1,
      footerStatus: false,
      limit: 10,
      totalPage: 1,
      listStatus: true
    }, () => {
      this.getListOrder()
    })
    sdk.setTitleInfo('代购订单')
  }

  getStatusText(status) {
    return {
      $0: '待资方审核',
      $1: '待资方上传',
      $2: '待确认',
      $3: '运输中',
      $4: '待资方上传',
      $5: '待确认',
      $6: '交易成功',
      $7: '审核未通过',
      $8: '已撤回',
      $9: '交易异常 ',
    }[`$${status}`]
  }

  getFirstText(status) {
    return {
      $0: '撤回订单',
      $2: '查验车辆',
      $3: '查看物流',
      $5: '确认信息',
      $7: '重新提交'
    }[`$${status}`]
  }
  handleClick(value) {
    this.setState({
      active: value,
      list: [],
      page: 1,
      footerStatus: false,
      limit: 10,
      totalPage: 1,
      listStatus: true
    }, () => {
      this.getListOrder()
    })
  }
  handlerprops(item) {

    Taro.navigateTo({
      url: `/pages/itemdetail/advancedetail?id=${item.id}&status=${item.statu}`
    })
  }

  onHandleFirst(item) {
    this.setState({
      id: item.id
    })
    if (item.statu === '0') {
      this.setState({
        isShow: true,
      })
    }
    else if (item.statu === '2') {
      Taro.navigateTo({
        url: `/pages/applicationinfo/applicationinfo?id=${item.id}&active=1&status=1`
      })
    }
    else if (item.statu === '3') {
      //查看物流
      this.setState({
        isCurtain: true,
        curItem: []
      }, () => {
        this.getLogisticList(item.id)
      })

    }
    else if (item.statu === '5') {
      Taro.navigateTo({
        url: `/pages/applicationinfo/applicationinfo?id=${item.id}&active=2&status=1`
      })
    }
    else if (item.statu === '7') {
      Taro.navigateTo({
        url: `/pages/advanceform/advanceform?id=${item.id}`
      })
    }
    else {
      this.handlerprops(item)
    }
  }
  getLogisticList(id) {
    http.getLogisticList({ id: id }).then(res => {
      if (!res) {
        return
      }
      let start = [], traning = [], end = []
      res.map(item => {
        // console.log(123)
        if (item.status === '1') {
          start.push({
            title: `物流已提车`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
          let endcity = '', startcity = ''
          if (item.endCity === '市辖区') {
            endcity = item.endProv
          } else {
            endcity = item.endCity
          }
          if (item.startCity === '市辖区') {
            startcity = item.startProv
          } else {
            startcity = item.startCity
          }
          this.setState({
            adStart: startcity,
            adEnd: endcity
          })
        }
        if (item.status === '2') {
          traning.push({
            title: `车辆到达${item.loAddrProv}${item.loAddrCity}`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
        }
        if (item.status === '3') {
          traning.push({
            title: `车辆已到达目的地，${item.endAddress}`,
            color: '',
            date: item.createTime.split(' ')[0],
            time: item.createTime.split(' ')[1]
          })
        }
      })
      let curItem = [...end, ...traning, ...start]
      curItem[0].color = 'yellow'
      this.setState({
        curItem
      })
    })
  }
  //撤回
  getBackAdvance(id) {
    http.getBackAdvance({ id: id }).then(res => {
      Taro.navigateTo({
        url: `/pages/itemdetail/advancedetail?id=${id}&status=8`
      })
    })
  }
  onClose() {
    this.setState({
      isShow: false
    })
  }
  onLastHandle() {
    let { id } = this.state
    this.onClose()
    this.getBackAdvance(id)
  }
  getListOrder() {
    let { page, limit, totalPage, active } = this.state
    let _obj = {
      limit,
      page,
      classStatus: active + 1
    }
    if (page > totalPage) {
      this.setState({
        footerStatus: true
      })
      return
    }
    http.getOrderList(_obj).then(res => {
      if (!res) {
        return
      }
      let _list = []
      res.list.map(item => {
        _list.push({
          id: item.id,
          order: item.orderNo,
          statu: item.status,
          list: [item.amCarType],
          flag: [item.amCarOutColor, item.amCarInColor],
          contract: item.amContractMoney + '万元',
          money: item.amMoney,

        })
      })
      this.setState({
        totalPage: res.totalPage,
        list: [...this.state.list, ..._list],
        listStatus: false
      })
    })
  }

  onScrollEnd = () => {
    this.setState({
      page: this.state.page + 1
    }, () => {
      this.getListOrder()
    })
  }
  handleChange() {
    this.setState({
      isCurtain: false
    })
  }
  render() {
    const {
      active,
      list,
      status,
      isShow,
      scrollHeight,
      footerStatus,
      isCurtain,
      curItem,
      adStart,
      adEnd
    } = this.state
    const tabList = [
      { title: '待审核' }, { title: '待验车' }, { title: '确认合同' }, { title: '已完结' }
    ]
    return (
      <View className='b_advanceorder'>
        <DNavBar title={'代购订单'} className='b_advanceorder_nav'></DNavBar>
        <View className='b_advanceorder__box'>
          <View className='b_advanceorder__content'>
            {

              <AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
                {
                  tabList.map(tap => <AtTabsPane>
                    <ScrollView
                      scrollY
                      scrollWithAnimation
                      lowerThreshold='20'
                      style={`height:${scrollHeight - 100}PX`}
                      onScrollToLower={this.onScrollEnd}
                    >
                      {
                        list && list.map((item, i) => {
                          return <DAdvance
                            {...item}
                            firstText={this.getFirstText(item.statu) || '查看订单'}
                            // status={active === 4 ? this.getStatusText(1) : tap.title}
                            status={this.getStatusText(item.statu)}
                            onHandleDetail={this.handlerprops.bind(this, item)}
                            onHandleFirst={this.onHandleFirst.bind(this, item)}
                          >
                          </DAdvance>
                        })
                      }
                      {
                        footerStatus && <View className='b_advanceorder__more'>暂无更多</View>
                      }
                    </ScrollView>

                  </AtTabsPane>
                  )
                }
              </AtTabs>
            }
          </View>
        </View>
        <DModal
          isShow={isShow}
          title='提示'
          text='确认撤回订单吗？'
          firstbtn='取消'
          lastbtn='确认'
          onFirst={this.onClose.bind(this)}
          onCancel={this.onClose.bind(this)}
          onLast={this.onLastHandle.bind(this)}
        ></DModal>
        {
          list.length === 0 && <DItemError></DItemError>
        }
        <DCurtain
          isCurtain={isCurtain}
          curItem={curItem}
          adstart={adStart || '--'}
          adend={adEnd || '--'}
          onClose={this.handleChange.bind(this)}
        ></DCurtain>
      </View>

    )
  }
}
